<template>
  <view class="nav">
    <view class="nav-item" :class="{ 'select': selectValue === item.value }" v-for="item in navList" :key="item.value"
      @tap="select(item.value)">{{ item.label }}</view>
  </view>
</template>
  
<script>
export default {
  props: {
    navList: {
      type: Array,
      default: ()=>[]
    },
    selectValue: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
    };
  },
  methods: {
    select(e) {
      this.$emit('select', e);
    }
  }
};
</script>
  
<style lang="less" scoped>
@primary: #d01117;
.nav {
  padding: 0 30upx;
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;


  .nav-item {
    height: 60upx;
    line-height: 60upx;
    position: relative;
  }

  .select {
    color: @primary;
  }

  .select::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30upx;
    width: 50upx;
    height: 5upx;
    background-color: @primary;
  }
}
</style>